<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;padding: 0;
            box-sizing: border-box;
        }
        #app{
            width: 700px;
            height: 650px;
            margin: auto;
            border: 1px solid #ccc;
        }
        #app h1{
            width: 700px;
            font-weight: 400;
            line-height: 100px;
            padding-left: 20px;
            background-color: #cccccc;
            margin-bottom: 20px;
        }
        #app>div{
            padding: 0 20px;
        }
        #app>div>input{
            width: 200px;
            height: 30px;
            padding: 0 5px;
            margin: 5px 0;
        }
        #app>div>textarea{
            padding: 5px;
            margin-top: 5px;
        }
        .cont div{
            height: 50px;
            border: 1px solid #acacac;
            border-radius: 5px;
            padding: 0 10px;
        }
        .cont div span{
            padding: 0 5px;
            line-height: 50px;
        }
        .cont p{
            display: inline-block;
        }
        .cont div p:nth-of-type(1){
            color: #550000;
        }
        .cont div p:nth-of-type(2){
            color: #595959;
        }
        .cont .del{
            float: right;
            line-height: 50px;
            color: #003366;
            cursor: pointer;
        }
        .cont .del:hover{
            color: #550000;
        }
        .send{
            width: 80px;
            height: 30px;
            margin-top: 10px;
        }
        hr{
            border: 1px solid #bababa;
            margin: 15px 0;
        }
        h3{
            font-weight: 400;
            color: #333;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<div id="app">
			<div>
				<textarea rows="2" cols="23" placeholder="内容" v-model.trim="tarea"></textarea><br>
				<!-- @click="",设置点击事件 -->
				<button class="send" @click="sendCont()">发表</button>
				<hr>
				<h3>回复内容：</h3>
				<!-- 遍历list数据 -->
				<div class="cont" v-for="val in list" :key="val.name">
					<div>
						<p>{{val.name}}</p>
						<p>{{val.item}}</p>
						<p class="del" @click="delCont(val)">删除</p>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",//指定模板
				data:{
					list:[
					
					],
					tarea:"",
				},
				methods:{
					sendCont(){
						var item = {item:this.tarea};
						// 在list的前面添加item
						this.list.unshift(item);
						this.tarea="";
					},
					// 评论最后的"删除"事件
					delCont(val){
						var ind = this.list.findIndex(value=>value.item===val.item);
						// 删除list第ind个
						this.list.splice(ind,1);
					}
				}
			})
		</script>
</body>
</html>